<template>
  <div>
    <el-form
      :disabled="disableElement"
      :model="importFromDatas"
      :rules="rules"
      label-width="150px"
      ref="purchaseListFrom"
      style="width: 70%; margin-left: 15%"
    >
      <el-form-item label="采购清单Excel文件" prop="PurchaseListExcel">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-download"
          @click="downloadPurchaseList"
          >点击下载</el-button
        >
        <div style="font-size: 12px">
          温馨提示：请下载采购清单并确认收到的物联卡与采购清单信息及数量都一致后再提交。
        </div>
      </el-form-item>
      <!-- <el-form-item label="卡入库文件" prop="SimCardImportFile">
        <el-upload
          :limit="1" accept=".xlsx, .xls" :headers="importUpload.headers"
          :file-list="fileList"
          :action="importUpload.url" :on-success="importFileUploadSucc">
          <el-button size="medium" type="primary" icon="el-icon-upload2">点击上传</el-button>
        </el-upload>
      </el-form-item> -->
      <!-- <el-form-item label="" prop="SimCardImportTemplate">
        <el-link :disabled="disableElement" @click="downloadImportExcelTemplate">这里在按钮右侧给出提示“温馨提示：请下载采购清单并确认收到的物联卡与采购清单信息及数量都一致后再提交。</el-link>
      </el-form-item> -->
      <el-form-item label="备注" prop="SimCardImportMemo">
        <el-input type="textarea" v-model="importFromDatas.SimCardImportMemo" />
      </el-form-item>
      <div
        v-if="showFormBtn"
        style="
          width: 30%;
          margin-left: 35%;
          display: flex;
          justify-content: space-between;
        "
      >
        <el-button type="primary" size="mini" @click="submitForm"
          >提交</el-button
        >
        <el-button @click="resetForm" size="mini">重置</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getToken } from "../../../utils/auth";
import downloadutil from "@/api/system/sim/downloadutil";
import { exportImportByFileName } from "@/api/system/sim/inbound";

export default {
  props: [
    "valueHistoryFormData",
    "importFromData",
    "showFormBtn",
    "disableElement",
  ],
  data() {
    return {
      valueHistoryFormDatas: this.valueHistoryFormData,
      importFromDatas: this.importFromData,
      importUpload: {
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/sim/inbound/exportImport",
      },
      fileList: [], //el-upload 组件上传文件列表
      rules: {
        ProvinceTelecomApprovalResult: [
          {
            required: true,
            message: "审批结果不能为空",
            trigger: "blur",
          },
        ],
        SimCardImportFile: [
          {
            required: true,
            message: "卡入库文件不能为空",
            trigger: "blur",
          },
        ],
      },
      queryParams: {
        fileName: "",
        businessKey: "",
        procInsId: "",
        deployId: "",
        poolId: "",
      },
    };
  },
  created() {},
  methods: {
    /** 清空表单 */
    resetForm() {
      //请空数据
      this.importFromDatas = {
        ProvinceTelecomApprovalResult: "",
        ProvinceTelecomApprovalComment: "",
      };
    },
    submitForm() {
      this.queryParams.fileName = this.importFromDatas.PurchaseListExcel;
      exportImportByFileName(this.queryParams).then((res) => {
        if (res.code == 200) {
          if (res.data == undefined) {
            this.$modal.msgWarning(
              "请先下载采购清单Excel文件并确认收到物联卡与文件中信息及数量是否一致。"
            );
          } else {
            if (res.data && res.data.id) {
              this.importFromDatas.SimCardImportFile = res.data.id;
              this.$refs.purchaseListFrom.validate((valid) => {
                if (!valid) return false;

                // 触发sumit事件
                const params = {
                  formType: "ImportFrom",
                  formData: this.importFromDatas,
                };
                this.$emit("submit", params);
                return true;
              });
            } else {
              this.$modal.msgError(file.msg);
            }
          }
        }
      });
    },
    initUploadUrl(_businessKey, _procInsId, _deployId, _poolId) {
      this.importUpload.url =
        this.importUpload.url +
        "?businessKey=" +
        _businessKey +
        "&procInsId=" +
        _procInsId +
        "&poolId=" +
        _poolId;
      this.queryParams.businessKey = _businessKey;
      this.queryParams.procInsId = _procInsId;
      this.queryParams.deployId = _deployId;
      this.queryParams.poolId = _poolId;
    },
    importFileUploadSucc(file) {
      if (file.data && file.data.id) {
        this.importFromDatas.SimCardImportFile = file.data.id;
        this.$refs.purchaseListFrom.clearValidate();
      } else {
        if (file.code && file.code == 500) {
          this.fileList = [];
          this.$modal.msgError(file.msg);
        }
      }
    },
    downloadPurchaseList() {
      let url =
        "/common/download?fileName=" +
        this.importFromDatas.PurchaseListExcel +
        "&delete=false&cacheStatus=true";
      downloadutil.getFile(url, {
        fileName: this.importFromDatas.PurchaseListExcel,
      });
    },
    downloadImportExcelTemplate() {
      let parameter = {
        accountID: this.valueHistoryFormDatas.AccountID,
        assignedIP: this.valueHistoryFormDatas.CityTelecomApprovalAssignedIP,
        currentIpPoolId: this.valueHistoryFormDatas.currentIpPoolId,
        productCode: this.valueHistoryFormDatas.product,
        applyScene: this.valueHistoryFormDatas.application_business_sys,
        applicantOrg: this.valueHistoryFormDatas.applicant_org,
        applyAmount: this.valueHistoryFormDatas.apply_amount,
        fileName: this.importFromDatas.PurchaseListExcel,
      };
      let jsonStr = JSON.stringify(parameter);
      let url =
        "/card/warehousing/export/Warehousing?jsonStr=" + encodeURI(jsonStr);
      downloadutil.getFile(url, { fileName: "simReceiveTemplate.xlsx" });
    },
  },
};
</script>

<style lang="scss" soped>
.bton {
  width: 53px;
  text-align: center;
}

.input-with-select {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.operator-link {
  color: #007a77;
  cursor: pointer;
}

.upDiv {
  text-align: center;

  i {
    color: #e6a23c;
  }

  a {
    text-align: center;
    line-height: 50px;
    color: #18a3ff;
  }
}
</style>
